@charset "utf-8";

@import "./reset.scss";
@import "./common.scss";

@function getvw($w) {
    @return $w / 1920 * 100 + vw;
}


//主要部分
main {
    margin-top: getvw(80);
    .banner{
        //轮播图设置
        .swiper-slide{
            width: 100%;
            height: getvw(1080);
            position: relative;
            .bg{
                width: 100%;
                height: 100%;
            }
            //轮播图的文字图片设置
            .yh{
                width: getvw(335);
                height: getvw(195);
                position: absolute;
                top: getvw(300);
                left: getvw(200);
            }
            .pro{
                width: getvw(440);
                height: getvw(75);
                position: absolute;
                top: getvw(430);
                left: getvw(350);
            }
            .offer{
                width: getvw(340);
                height: getvw(55);
                position: absolute;
                top: getvw(500);
                left: getvw(230);
            }
            .packing{
                width: getvw(285);
                height: getvw(70);
                position: absolute;
                left: getvw(500);
                bottom: getvw(450);
            }
            .professional{
                width: getvw(400);
                height: getvw(65);
                position: absolute;
                left: getvw(280);
                bottom: getvw(390);
            }
        }
        //第二张轮播图
        .second{
            display: flex;
            flex-direction: column;
            align-items: center;
            .secondBg{
                width: 100%;
                height: 100%;
            }
            .secondYh{
                width: getvw(300);
                height: getvw(170);
                position: absolute;
                top: getvw(230);
            }
            .future{
                width: getvw(900);
                height: getvw(85);
                position: absolute;
                top: getvw(420);
            }
            .lead{
                width: getvw(650);
                height: getvw(60);
                position: absolute;
                top: getvw(520);
            }
        }
        //第三张轮播图
        .third{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            .thirdBg{
                width: 100%;
                height: 100%;
            }
            .company{
                width: getvw(720);
                height: getvw(80);
                position: absolute;
                top: getvw(350);
            }
            .gz{
                width: getvw(1000);
                height: getvw(30);
                position: absolute;
                top: getvw(455);
            }
            .pro{
                width: getvw(390);
                height: getvw(35);
                position: absolute;
                top: getvw(520);
            }
        }
    }
    //“关于我们”图片
    .about{
        width: 100%;
        height: getvw(1080);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .aboutBg{
            width: 100%;
            height: getvw(1080);
            position: absolute;
            z-index: -10;
        }
        h1{
            font-size: getvw(71);
            font-weight: bold;
            margin-top: getvw(350);
        }
        span{
            font-size: getvw(20);
            margin-top: getvw(20);
            color: #bbbbbb;
        }
        p{
            font-size: getvw(30);
            margin-top: getvw(25);
            color: #666666;
        }
        p:nth-child(5){
            width: getvw(900);
            font-size: getvw(20);
            text-align: center;
            color: #888888;
        }
        button{
            width: getvw(205);
            height: getvw(60);
            font-size: getvw(10);
            margin-top: getvw(50);
            border: getvw(1) solid #ff3d00;
            background-color: white;
            border-radius: getvw(100);
            cursor: pointer;
        }
    }
    //“播放器”页面
    .video{
        width: 100%;
        height: getvw(1080);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .videoBg{
            width: 100%;
            height: getvw(1080);
            position: absolute;
            z-index: -10;
        }
        .circle{
            width: getvw(260);
            height: getvw(260);
            background-color: black;
            border-radius: 50%;
            margin-top: getvw(410);
            opacity: 0.8;
            position: relative;
            transition: all ease 1.5s;
            cursor: pointer;
            //利用after做中间的三角形效果
            &::after{
                content: '';
                width: 0px;
                height: 0px;
                border-width: getvw(60) getvw(80);
                border-style: solid;
                border-color: transparent transparent transparent #ff3d00;
                position: absolute;
                top: getvw(70);
                left: getvw(105);
            }
        }
        p{
            color: #403f41;
            font-size: getvw(20);
            margin-top: getvw(25);
            transition: all ease 1.5s;
        }
    }
    //“案例”页面
    .case{
        width: 100%;
        height: getvw(1080);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .caseBg{
            width: 100%;
            height: getvw(1080);
            position: absolute;
            z-index: -10;
            display: inline-block;
        }
        p{
            font-size: getvw(80);
            color: #ff3d00;
            margin-top: getvw(440);
        }
        span{
            font-size: getvw(60);
            margin-top: getvw(25);
            color: white;
        }
        button{
            width: getvw(205);
            height: getvw(60);
            font-size: getvw(16);
            margin-top: getvw(340);
            border: getvw(1) solid #ff3d00;
            background-color: #eeeeee;
            border-radius: getvw(100);
            cursor: pointer;
        }
    }
    //合作伙伴页面
    .partner{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
            margin-top: getvw(110);
            font-size: getvw(55);
            font-weight: bold;
        }
        span{
            margin-top: getvw(15);
            font-size: getvw(25);
        }
        ul{
            width: getvw(1400);
            height: getvw(450);
            display: flex;
            flex-wrap: wrap;
            margin-top: getvw(55);
            li{
                width: getvw(233);
                height: getvw(150);
                img{
                    width: 100%;
                }
            }
        }
    }
}
